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1.Einführung in HTML5 


Was ist HTML5? 

HTMLS ist die fünfte und aktuelle Version des Hypertext Markup Language (HTML), das zur Erstellung 
von Webseiten verwendet wird. Es wurde im Jahr 2014 von der World Wide Web Consortium (W3C) 
verabschiedet und hat seitdem die vorherigen Versionen, wie HTML4 und XHTML, abgelöst. 


HTMLS bringt viele neue und verbesserte Funktionen im Vergleich zu früheren Versionen von HTML 
mit sich. Einige der wichtigsten Neuerungen sind: 


Neue Tags: HTMLS5 führt viele neue Tags ein, die es Entwicklern ermöglichen, Inhalte besser zu 
strukturieren und zu präsentieren. Beispiele sind die <article>, <section>, <header> und <nav> Tags. 


Formulare: HTMLS5 verbessert die Möglichkeiten für die Erstellung von Formularen. Es unterstützt 
neue Eingabetypen wie Datum, Zeit, E-Mail und Farbauswahl. Außerdem können Felder jetzt direkt 
auf dem Client validiert werden, ohne dass eine Rückfrage an den Server erforderlich ist. 


Medien: HTMLS erleichtert die Einbindung von Audio- und Videoinhalten auf Webseiten. Entwickler 
können jetzt Medien direkt in HTML-Seiten einbetten, anstatt auf externe Plugins wie Flash zu 
setzen. 


Canvas: HTMLS5 führt eine neue Technologie namens Canvas ein, die es ermöglicht, 2D-Grafiken und 
Animationen direkt im Browser darzustellen. 


Geolocation: HTML5 ermöglicht es, die geografische Position eines Benutzers zu bestimmen und auf 
Karten darzustellen. 


Offline-Speicher: HTML5 ermöglicht es, Daten auf dem Gerät des Benutzers zu speichern, auch wenn 
keine Internetverbindung besteht. 


APIs: HTMLS5 enthält viele neue APls, die es ermöglichen, fortgeschrittene Funktionen in Webseiten 
zu integrieren, wie z.B WebSockets, Webworkers, WebRTC und WebGl. 


Insgesamt ermöglicht HTMLS5 Entwicklern, leistungsstärkere und interaktivere Webseiten und 
Anwendungen zu erstellen, die besser auf verschiedene Geräte und Browser angepasst sind. HTML5 
ist auch wichtig für die mobile Entwicklung, da es die Möglichkeiten für die Erstellung von responsive 
Design und Touch-Events bietet. 


Warum sollten Sie HTML5 verwenden? 
Es gibt viele Gründe, warum Entwickler HTML5 verwenden sollten. Einige der wichtigsten Vorteile 
sind: 


Kompatibilität: HTML5 ist kompatibel mit den meisten modernen Webbrowsern und Geräten, 
einschließlich Desktops, Laptops, Smartphones und Tablets. Entwickler müssen sich nicht mehr um 
Probleme mit Browserinkompatibilität und Plugins kümmern. 


Strukturierter Code: HTMLS5 führt viele neue Tags ein, die es ermöglichen, Inhalte besser zu 
strukturieren und zu präsentieren. Dies erleichtert es Entwicklern, ihre Webseiten und Anwendungen 
leichter zu organisieren und zu warten. 


Medienintegration: HTML5 ermöglicht es, Audio- und Videoinhalte direkt in Webseiten einzubetten, 
ohne dass externe Plugins wie Flash erforderlich sind. Dies erleichtert die Erstellung von interaktiven 
und multimedialen Inhalten. 


Interaktive Funktionen: HTMLS enthält viele neue APIs, die es ermöglichen, fortgeschrittene 
Funktionen wie Animationen, Spiele und interaktive Anwendungen zu erstellen. 


Offline-Speicher: HTML5 ermöglicht es, Daten auf dem Gerät des Benutzers zu speichern, auch wenn 
keine Internetverbindung besteht. Dies ermöglicht die Erstellung von Web-Apps, die auch offline 
verfügbar sind. 


Geolocation: HTML5 ermöglicht es, die geografische Position eines Benutzers zu bestimmen und auf 
Karten darzustellen. Dies ermöglicht die Erstellung von Anwendungen, die auf die aktuelle Position 
des Benutzers reagieren. 


Suchmaschinenoptimierung: Durch die Verwendung von HTMLS-Tags wird die Struktur der Inhalte 
verbessert, was die Auffindbarkeit von Webseiten und Anwendungen in Suchmaschinen erhöht. 


Mobile Entwicklung: HTMLS ist wichtig für die mobile Entwicklung, da es die Möglichkeiten für die 
Erstellung von responsive Design und Touch-Events bietet. 


Insgesamt bietet HTMLS5 Entwicklern viele Möglichkeiten, leistungsstärkere und interaktivere 
Webseiten und Anwendungen zu erstellen, die besser auf verschiedene Geräte und Browser 
angepasst sind und zusätzliche Funktionalitäten bieten. 


Unterschiede zwischen HTML5 und früheren Versionen von HTML 
HTMLS unterscheidet sich in einigen wichtigen Aspekten von früheren Versionen von HTML. Einige 
der wichtigsten Unterschiede sind: 


Neue Tags: HTMLS5 führt viele neue Tags ein, die es Entwicklern ermöglichen, Inhalte besser zu 
strukturieren und zu präsentieren. Diese neuen Tags beziehen sich auf semantische Elemente wie 
<header>, <nav>, <article> und <section>. Diese ermöglichen es Entwicklern, den Inhalt ihrer Seite in 
logische Abschnitte aufzuteilen und diese für Suchmaschinen besser verständlich zu machen. 


Formulare: HTMLS5 verbessert die Möglichkeiten für die Erstellung von Formularen. Es unterstützt 
neue Eingabetypen wie Datum, Zeit, E-Mail, Farbauswahl und suchfeld, außerdem können Felder 
jetzt direkt auf dem Client validiert werden, ohne dass eine Rückfrage an den Server erforderlich ist. 


Medien: HTMLS erleichtert die Einbindung von Audio- und Videoinhalten auf Webseiten. Entwickler 
können jetzt Medien direkt in HTML-Seiten einbetten, anstatt auf externe Plugins wie Flash zu 
setzen. 


Canvas: HTMLS5 führt eine neue Technologie namens Canvas ein, die es ermöglicht, 2D-Grafiken und 
Animationen direkt im Browser darzustellen. 


Geolocation: HTML5 ermöglicht es, die geografische Position eines Benutzers zu bestimmen und auf 
Karten darzustellen. 


Offline-Speicher: HTML5 ermöglicht es, Daten auf dem Gerät des Benutzers zu speichern, auch wenn 
keine Internetverbindung besteht. 


APIs: HTMLS5 enthält viele neue APIs, die es ermöglichen, fortgeschrittene Funktionen in Webseiten 
zu integrieren, wie z.B WebSockets, Webworkers, WebRTC und WebGl. 


Mobile Entwicklung: HTMLS ist wichtig für die mobile Entwicklung, da es die Möglichkeiten für die 
Erstellung von responsive Design und Touch-Events bietet. 


Abwärtskompatibilität: HTMLS5 ist abwärtskompatibel zu früheren Versionen von HTML, was 
bedeutet, dass es die meisten bestehenden HTML-Dokumente unterstützt und sie ohne Änderungen 
darstellen kann. 


Im Vergleich zu früheren Versionen von HTML, ist HTMLS5 eine moderne und leistungsfähige 
Technologie, die es Entwicklern ermöglicht, leistungsstärkere und interaktivere Webseiten und 


Anwendungen zu erstellen. Durch die Verwendung von neuen Tags und APIs können Entwickler 
Inhalte besser strukturieren, Medien integrieren, interaktive Funktionen hinzufügen und die 
geografische Position eines Benutzers bestimmen. HTMLS5 ermöglicht auch die Erstellung von Web- 
Apps, die auch offline verfügbar sind und es ist optimiert für mobile Entwicklung. Insgesamt 
ermöglicht HTMLS5 Entwicklern, ihre Webseiten und Anwendungen an die schnell wechselnden 
Anforderungen der modernen Technologie anzupassen. 


2.Grundlagen von HTML5 


Struktur eines HTML5-Dokuments 
Ein HTML5-Dokument hat eine bestimmte Struktur, die aus verschiedenen Teilen besteht. Die 
wichtigsten Teile eines HTML5-Dokuments sind: 


Doctype: Der Doctype ist der erste Teil eines HTML-Dokuments und gibt den Browser an, dass es sich 
um ein HTML5-Dokument handelt. Der Doctype für HTMLS5 lautet <IDOCTYPE html> 


<html>-Tag: Der <html>-Tag ist der Wurzelknoten des Dokuments und enthält alle anderen 
Elemente. Er besteht aus einem Anfangs- und einem Endtag. 


<head>-Tag: Der <head>-Tag enthält Meta-Informationen über das Dokument, wie z.B. den Titel der 
Seite, die verwendet wird, wenn die Seite in einem Browser-Tab oder in einer Lesezeichenliste 
angezeigt wird. Es enthält auch die Verweise auf CSS und JavaScript Dateien. 


<body>-Tag: Der <body>-Tag enthält den eigentlichen Inhalt des Dokuments, wie z.B. Text, Bilder, 
Links und Formulare. 


<header>-Tag: Der <header>-Tag enthält die Kopfzeile der Seite, die in der Regel den Namen der 
Seite, ein Logo und ein Navigationselement enthält. 


<nav>-Tag: Der <nav>-Tag enthält die Navigationselemente der Seite, wie z.B. Links zu anderen 
Seiten oder Abschnitten innerhalb der Seite. 


<main>-Tag: Der <main>-Tag enthält den primären Inhalt der Seite, der von anderen Elementen wie 
Header und Navigation unterschieden werden soll. 


<article>-Tag: Der <article>-Tag enthält einen unabhängigen und selbstständigen Inhalt, der von 
anderen Teilen der Seite abgekoppelt werden kann, wie z.B. ein Blog-Beitrag oder eine Nachricht. 


<section>-Tag: Der <section>-Tag enthält Inhalte, die in logischen Abschnitten gruppiert werden, wie 
z.B. ein Kapitel in einem Buch oder ein Abschnitt in einer Nachricht. 


<footer>-Tag: Der <footer>-Tag enthält die Fußzeile der Seite, die in der Regel Copyright- 
Informationen, Links zu anderen Seiten oder Kontaktinformationen enthält. 


Jeder dieser Tags sollte mit einem Anfangs- und einem Endtag (z.B.</html>) verwendet werden und 
jeder Tag hat seine spezifische Funktion und Zweck. Diese Struktur erleichtert es Entwicklern, ihre 
Webseiten und Anwendungen leicht zu organisieren und zu warten. Durch die Verwendung 


semantischer Tags wie <header>, <nav>, <article> und <section> können Entwickler den Inhalt ihrer 
Seite in logische Abschnitte aufteilen und diese für Suchmaschinen besser verständlich machen. Dies 
verbessert auch die Zugänglichkeit und die Benutzererfahrung für Benutzer mit assistiven 
Technologien. 


Es ist wichtig zu beachten, dass die Struktur eines HTML5-Dokuments nicht statisch ist und sich je 
nach Anforderungen und Zweck der Webseite oder Anwendung unterscheiden kann. Entwickler 
können weitere semantische Tags oder benutzerdefinierte Klassen und IDs verwenden, um die 
Struktur ihrer Seite anzupassen. 


Es ist auch wichtig, dass die Struktur eines HTML5-Dokuments sauber und ordentlich gehalten wird, 
um die Lesbarkeit und Wartbarkeit zu verbessern und Probleme mit der Darstellung der Seite zu 
vermeiden. Entwickler sollten sich an bestehende Standards und Empfehlungen halten, um eine 
konsistente und zugängliche Struktur für ihre Webseiten und Anwendungen zu erstellen. 


Die neuen HTML5-Tags 
HTMLS führt viele neue Tags ein, die es Entwicklern ermöglichen, Inhalte besser zu strukturieren und 
zu präsentieren. Hier sind einige der wichtigsten neuen HTMLS-Tags: 


<header>-Tag: Der <header>-Tag enthält die Kopfzeile einer Seite oder eines Abschnitts. Es kann den 
Namen der Seite, ein Logo, ein Navigationselement oder andere Meta-Informationen enthalten. 


<nav>-Tag: Der <nav>-Tag enthält die Navigationselemente einer Seite, wie z.B. Links zu anderen 
Seiten oder Abschnitten innerhalb der Seite. 


<article>-Tag: Der <article>-Tag enthält einen unabhängigen und selbstständigen Inhalt, der von 
anderen Teilen der Seite abgekoppelt werden kann, wie z.B. einen Blog-Beitrag oder eine Nachricht. 


<section>-Tag: Der <section>-Tag enthält Inhalte, die in logischen Abschnitten gruppiert werden, wie 
z.B. ein Kapitel in einem Buch oder ein Abschnitt in einer Nachricht. 


<aside>-Tag: Der <aside>-Tag enthält Inhalte, die in Bezug zu dem primären Inhalt der Seite stehen, 
aber nicht unbedingt zwingend für die Verständlichkeit des primären Inhalts sind, wie z.B. 
Zusatzinformationen, Zitate oder Anzeigen. 


<figure>-Tag: Der <figure>-Tag enthält ein Bild oder eine andere Mediendatei sowie eine 
Beschriftung oder eine Legende dazu. 


<figcaption>-Tag: Der <figcaption>-Tag enthält die Beschriftung oder Legende zu einem <figure>- 
Element. 


<time>-Tag: Der <time>-Tag kennzeichnet ein Datum oder eine Uhrzeit und ermöglicht es, diese 
automatisch zu formatieren und zu interpretieren. 


<mark>-Tag: Der <mark>-Tag kennzeichnet einen Textabschnitt als hervorgehoben und 
hervorgehobenen Inhalt. 


<progress>-Tag: Der <progress>-Tag zeigt den Fortschritt einer Aufgabe an, wie z.B. den Fortschritt 
eines Downloads oder einer Formularübertragung. 


Diese neuen HTMLS5-Tags erleichtern es Entwicklern, ihre Webseiten und Anwendungen besser zu 
strukturieren und die Bedeutung von Inhalten für Suchmaschinen und Benutzer mit assistiven 
Technologien besser verständlich zu machen. Sie ermöglichen es auch, die Lesbarkeit und 
Wartbarkeit des Codes zu verbessern und die Benutzererfahrung zu optimieren. 


Einige dieser neuen Tags, wie z.B. <header>, <nav>, <article>, <section>, <aside> und <figure>, 
ermöglichen es Entwicklern, den Inhalt ihrer Seite in logische Abschnitte aufzuteilen und diese für 
Suchmaschinen besser verständlich zu machen. Andere Tags, wie <time>, <mark> und <progress>, 
ermöglichen es, Inhalte besser zu formatieren und interaktive Funktionen hinzuzufügen. 


Es ist wichtig zu beachten, dass nicht alle dieser neuen HTMLS-Tags in jedem Projekt verwendet 
werden müssen oder sogar sinnvoll sind. Entwickler sollten sorgfältig abwägen, welche Tags für ihre 
Projekte am besten geeignet sind, um eine saubere und ordentliche Struktur zu erhalten und die 
Zugänglichkeit und Benutzererfahrung zu verbessern. 


Textformatierung mit HTML5 
HTMLS bietet verschiedene Möglichkeiten, um Text auf einer Webseite zu formatieren. Hier sind 
einige der wichtigsten Textformatierungs-Tags in HTMLS: 


<p>-Tag: Der <p>-Tag steht für "paragraph" und wird verwendet, um Absätze zu erstellen. Der Text 
innerhalb des <p>-Tags wird automatisch als Absatz formatiert, mit einem Zeilenumbruch vor und 
nach dem Text. 


<h1>-<h6>-Tag: Die <h1>-<h6>-Tags werden verwendet, um Überschriften zu erstellen. Der <h1>-Tag 
erstellt die größte Überschrift (die wichtigste), während der <h6>-Tag die kleinste Überschrift erstellt. 


<strong>-Tag: Der <strong>-Tag wird verwendet, um Text hervorzuheben und ihm Bedeutung zu 
verleihen. Der Text innerhalb des <strong>-Tags wird normalerweise fett dargestellt. 


<em>-Tag: Der <em>-Tag wird verwendet, um Text hervorzuheben und ihm Bedeutung zu verleihen. 
Der Text innerhalb des <em>-Tags wird normalerweise kursiv dargestellt. 


<abbr>-Tag: Der <abbr>-Tag wird verwendet, um Abkürzungen oder Akronyme zu kennzeichnen. Es 
ermöglicht es dem Benutzer, die vollständige Form des Wortes aufzurufen, indem er auf das 
kennzeichnete Wort klickt oder es mit der Maus überfährt. 


<blockquote>-Tag: Der <blockquote>-Tag wird verwendet, um Zitate darzustellen. Es erstellt einen 
Textabschnitt, der von der übrigen Seite abgehoben ist, um die Trennung von Zitaten und dem 
eigentlichen Inhalt hervorzuheben. 


<q>-Tag: Der <q>-Tag wird verwendet, um kurze Zitate innerhalb des Textes darzustellen, es kann 
automatisch Anführungszeichen hinzufügen. 


<pre>-Tag: Der <pre>-Tag wird verwendet, um Text in einer vorformatierten Weise darzustellen, die 
Leerzeichen und Zeilenumbrüche beibehält. Es wird häufig verwendet, um Code-Beispiele 
darzustellen. 


<code>-Tag: Der <code>-Tag wird verwendet, um einzelne Wörter oder kurze Abschnitte von Code 
innerhalb des Textes darzustellen. Es wird normalerweise in einer Schriftart dargestellt, die als 
"Code-Schriftart" bezeichnet wird, um es von normalem Text zu unterscheiden. 


<sub>-Tag und <sup>-Tag: Der <sub>-Tag und <sup>-Tag werden verwendet, um Text als Tiefstellung 
(<sub> ) oder Hochstellung ( <sup>) darzustellen. Sie werden häufig verwendet, um mathematische 
oder wissenschaftliche Inhalte darzustellen. 


Diese Textformatierungs-Tags erleichtern es Entwicklern, den Inhalt ihrer Seite zu strukturieren und 
ihm Bedeutung zu verleihen. Sie können auch verwendet werden, um die Lesbarkeit und 
Benutzererfahrung zu verbessern und Inhalte für Suchmaschinen besser verständlich zu machen. Es 
ist wichtig, die Tags korrekt zu verwenden, um sicherzustellen, dass der Inhalt korrekt interpretiert 
und dargestellt wird. 


Links und Bilder einfügen 
In HTML5 können Entwickler Links und Bilder auf mehrere Arten einfügen, um die Navigation und die 
visuelle Darstellung einer Webseite zu verbessern. 


Links einfügen: Der <a>-Tag (Anchor-Tag) wird verwendet, um Links auf einer Webseite zu erstellen. 
Der <a>-Tag hat ein "href" Attribut, das die URL des verlinkten Dokuments enthält. Beispiel: <a 
href="https://www.example.com"> Example </a>. 


Bilder einfügen: Der <img>-Tag (image-Tag) wird verwendet, um Bilder auf einer Webseite 
einzufügen. Der <img>-Tag hat mehrere Attribute, darunter "src" (die URL des Bildes), "alt" (eine 
Alternative Beschreibung des Bildes für Screenreader und andere Assistive Technologien), "width" 
und "height" (die Abmessungen des Bildes) und "style" (CSS-Eigenschaften des Bildes). Beispiel: <img 
srce="image.jpg" alt="example image" width="300" height="200"> 


Es gibt auch andere Möglichkeiten, Bilder einzufügen, wie z.B. das <picture>-Tag, das es ermöglicht, 
mehrere Bilder mit unterschiedlichen Eigenschaften bereitzustellen, um die optimale Darstellung auf 
verschiedenen Geräten zu gewährleisten. 


Es ist wichtig, dass Entwickler sicherstellen, dass die verwendeten Links und Bilder korrekt und 
aktuell sind, um eine reibungslose Navigation und eine korrekte Darstellung der Inhalte auf der 
Webseite zu gewährleisten. Es ist auch wichtig, alternative Textbeschreibungen für Bilder 
bereitzustellen, um die Zugänglichkeit für Benutzer mit assistiven Technologien zu verbessern. 


3.HTML5-Formulare 


Formularelemente und Attribute 

HTMLS bietet verschiedene Formularelemente und Attribute, die es Entwicklern ermöglichen, 
interaktive Formulare auf einer Webseite zu erstellen. Hier sind einige der wichtigsten 
Formularelemente und Attribute in HTML5: 


<form>-Tag: Der <form>-Tag definiert ein Formular auf einer Webseite. Innerhalb des Formulars 
können verschiedene Formularelemente wie Textfelder, Auswahlmenüs und Schaltflächen platziert 
werden. 


<input>-Tag: Der <input>-Tag erstellt verschiedene Arten von Formularelementen, wie z.B. 
Textfelder, Checkboxen, Radiobuttons und Schaltflächen. Das "type" Attribut bestimmt den Typ des 
Formularelements, z.B. "text" für ein Textfeld oder "checkbox" für eine Checkbox. 


<label>-Tag: Der <label>-Tag erstellt eine Beschriftung für ein Formularelement. Es ermöglicht es 
Benutzern, ein Formularelement mit der Tastatur auszuwählen, indem sie auf die Beschriftung 
klicken. 


<select>-Tag: Der <select>-Tag erstellt ein Auswahlmenü. Innerhalb des <select>-Tags können 
<option>-Tags verwendet werden, um einzelne Auswahlmöglichkeiten hinzuzufügen. 


<textarea>-Tag: Der <textarea>-Tag erstellt ein Textfeld für mehrere Zeilen. Es unterscheidet sich von 
einem einfachen <input>-Tag mit "text" als type-Attribut, da es ermöglicht, mehrere Zeilen Text 
einzugeben. 


"required" Attribut: Das "required" Attribut kann verwendet werden, um ein Formularelement als 
Pflichtfeld zu kennzeichnen. Ein Formularelement mit diesem Attribut muss ausgefüllt werden, bevor 
das Formular abgeschickt werden kann. 


"pattern" Attribut: Das "pattern" Attribut kann verwendet werden, um einen regulären Ausdruck 
festzulegen, der die Eingabe im Formularelement validieren soll. Beispiel: <input type="text" 
pattern="[a-zA-ZO-9]+" required> 


"placeholder" Attribut: Das "placeholder" Attribut kann verwendet werden, um einen vorläufigen 
Text im Formularelement anzuzeigen, der beschreibt, was in das Feld eingetragen werden soll. 
Beispiel: <input type="email" placeholder="your-email@example.com"> 


"min" und "max" Attribute: Diese Attribute können verwendet werden, um die minimalen und 
maximalen Werte für numerische Eingabe im Formularelement festzulegen. Beispiel: <input 
type="number" min="1" max="100"> 


Diese Formularelemente und Attribute erleichtern es Entwicklern, interaktive Formulare auf einer 
Webseite zu erstellen und Daten von Benutzern zu sammeln. Es ist wichtig, die Verwendung dieser 
Elemente und Attribute sorgfältig zu planen und zu testen, um sicherzustellen, dass sie korrekt 
funktionieren und die Datensicherheit gewährleistet ist. 


Eingabetypen und -validierung 

HTMLS bietet verschiedene Eingabetypen für das <input>-Tag, die es Entwicklern ermöglichen, die 
Eingabe von Benutzern auf bestimmte Arten von Daten zu beschränken und zu validieren. Hier sind 
einige der wichtigsten Eingabetypen in HTML5: 


text: Der Eingabetyp "text" erstellt ein Textfeld, in das Benutzer beliebigen Text eingeben können. 


password: Der Eingabetyp "password" erstellt ein Textfeld, in das Benutzer ein Passwort eingeben 
können. Der eingegebene Text wird normalerweise durch Sterne oder andere Maskierungszeichen 
ersetzt. 


email: Der Eingabetyp "email" erstellt ein Textfeld, in das Benutzer eine E-Mail-Adresse eingeben 
können. Es kann automatisch überprüfen, ob die eingegebene E-Mail-Adresse in einem gültigen 
Format ist. 


number: Der Eingabetyp "number" erstellt ein Textfeld, in das Benutzer numerische Werte eingeben 
können. Es kann automatisch überprüfen, ob der eingegebene Wert innerhalb eines bestimmten 
Bereichs liegt. 


url: Der Eingabetyp "url" erstellt ein Textfeld, in das Benutzer eine URL eingeben können. Es kann 
automatisch überprüfen, ob die eingegebene URL in einem gültigen Format ist. 


date: Der Eingabetyp "date" erstellt ein Textfeld oder ein Datumsauswahlfeld, in das Benutzer ein 
Datum eingeben können. Es kann automatisch überprüfen, ob das eingegebene Datum in einem 
gültigen Format ist. 


search: Der Eingabetyp "search" erstellt ein Textfeld, das ähnlich wie "text" ist, aber es wird oft 
verwendet, um eine Suchfunktion zu implementieren. 


Diese Eingabetypen erleichtern es Entwicklern, die Eingabe von Benutzern zu validieren und 
sicherzustellen, dass die eingegebenen Daten im erwarteten Format vorliegen. Es ist wichtig zu 
beachten, dass die Unterstützung für diese Eingabetypen von verschiedenen Browsern 
unterschiedlich sein kann und es empfehlenswert ist die Kompatibilität zu überprüfen. 


Es gibt auch JavaScript Validierungen die man hinzufügen kann um die Eingabe zu überprüfen und 
gegebenenfalls Fehlermeldungen anzuzeigen. Diese Validierungen können auf verschiedene Arten 
implementiert werden, z.B. mithilfe von regulären Ausdrücken, indem man das HTMLS "pattern" 
Attribut verwendet oder indem man JavaScript Funktionen verwendet die auf das Formular oder 
einzelne Formularelemente angewendet werden. 


Es ist wichtig, die Eingabevalidierung sorgfältig zu planen und zu testen, um sicherzustellen, dass sie 
korrekt funktioniert und die Datensicherheit gewährleistet ist. 


Formulardaten senden und empfangen 
Um Formulardaten von einer Webseite zu senden und zu empfangen, müssen Entwickler einige 
Schritte ausführen: 


Erstellen des Formulars mit dem <form>-Tag und verschiedenen Formularelementen wie Textfelder, 
Auswahlmenüs und Schaltflächen. 


Festlegen der Aktions-URL, an die das Formular gesendet wird, mit dem "action" Attribut des <form>- 
Tags. Beispiel: <form action="submit-form.php"> 


Festlegen des Übertragungsmethoden-Types mit dem "method" Attribut des <form>-Tags. Es gibt 
zwei Hauptmethoden: "GET" und "POST". GET wird verwendet, um Daten im URL-Parameter zu 
senden, während POST verwendet wird, um Daten im HTTP-Body zu senden. 


Hinzufügen einer Schaltfläche oder eines anderen Elements zum Formular, das das Formular 
absenden lässt, z.B. <input type="submit" value="Senden"> 


Empfangen und Verarbeiten der Formulardaten auf der Serverseite. Dies kann mit einer 
Programmiersprache wie PHP, Ruby, Python oder Node.js erfolgen. 


Abschicken des Formulars mit JavaScript oder durch Klicken auf den Submit-Button 


Überprüfen der Daten auf der Serverseite, z.B. durch Validierungen, und gegebenenfalls 
Rückmeldungen an den Benutzer senden. 


Speichern oder weiterverarbeiten der Daten in einer Datenbank oder einem anderen 
Speichermedium. 


Es ist wichtig, sicherzustellen, dass die Formulardaten sicher und geschützt übertragen werden und 
dass sie auf der Serverseite korrekt verarbeitet werden. Es ist auch wichtig, sicherzustellen, dass die 
Datenschutzbestimmungen eingehalten werden. 


4.HTML5-Medien 


Audio- und Videoeinbindung 
In HTMLS5 können Entwickler Audio- und Videoinhalte auf mehrere Arten in eine Webseite einbinden. 


Audioeinbindung: Der <audio>-Tag ermöglicht es, Audiodateien in eine Webseite einzubetten. 
Innerhalb des <audio>-Tags können <source>-Tags verwendet werden, um die Quelle der Audiodatei 
anzugeben. Beispiel: 


<audio controls> 
<source src="audio.mp3" type="audio/mpeg'"> 
<source src="audio.ogg" type="audio/ogg"> 


</audio> 


Videoeinbindung: Der <video>-Tag ermöglicht es, Videodateien in eine Webseite einzubetten. 
Innerhalb des <video>-Tags können <source>-Tags verwendet werden, um die Quelle der Videodatei 
anzugeben. Beispiel: 


<video controls> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.ogg" type="video/ogg"> 


</video> 


Die "controls" Attribut in audio und video tags ermöglicht es dem Benutzer, die Wiedergabe des 
Videos oder Audios zu steuern (Play/Pause/Lautstärke/etc). 


Es ist wichtig, sicherzustellen, dass die eingebetteten Audios und Videos korrekt formatiert sind und 
kompatibel mit den meisten modernen Browsern. Es ist auch ratsam, alternative Inhalte 
bereitzustellen, falls das eingebettete Audio oder Video auf einigen Geräten oder Browsern nicht 
unterstützt wird. 


Es gibt auch alternative Methoden, um Audio und Video Inhalte einzubinden, wie zum Beispiel das 
verwenden von iframe oder embed tags von externen Diensten wie YouTube oder Vimeo. 


Mediensteuerung und -skalierung 
HTMLS bietet verschiedene Möglichkeiten, um die Steuerung und Skalierung von Medieninhalten 
wie Audio und Video auf einer Webseite zu ermöglichen. 


Mediensteuerung: Der <audio>- und <video>-Tag bietet standardmäßig Steuerelemente wie 
Wiedergabe/Pause, Lautstärkeregelung und Fortschrittsanzeige. Entwickler können auch JavaScript 
verwenden, um zusätzliche Steuerelemente wie die Möglichkeit zum Springen zu einer bestimmten 
Zeit im Audio- oder Videoinhalt hinzuzufügen. 


Medienskalierung: Der <audio>- und <video>-Tag bietet standardmäßig die Möglichkeit, die Größe 
des eingebetteten Inhalts anzupassen, indem die Breite und Höhe des Tags definiert werden. Mit CSS 
können Entwickler auch die Darstellung des Inhalts weiter anpassen, z.B. durch Ändern der 
Abmessungen, des Hintergrunds oder der Rahmen. 


Vollbildmodus: In HTMLS gibt es die Möglichkeit, ein Video oder einen Audio in Vollbildmodus 
darzustellen, dies kann durch JavaScript erreicht werden, indem man die Methode 
requestFullscreen() auf das video oder audio element anwendet. 


Automatische Wiedergabe: Es gibt einige Einschränkungen bezüglich der automatischen Wiedergabe 
von Audios und Videos auf einer Webseite, da sie häufig als störend empfunden werden können. 
Einige Browser blockieren automatische Wiedergabe von Inhalten, es sei denn, der Benutzer hat sie 
explizit erlaubt. Entwickler können jedoch JavaScript verwenden, um die automatische Wiedergabe 
von Audios oder Videos zu ermöglichen, jedoch sollten sie sicherstellen, dass diese Funktion 
sorgfältig geplant und implementiert wird, um ein positives Benutzererlebnis zu gewährleisten. 


Es ist wichtig, dass Entwickler die Steuerung und Skalierung von Medieninhalten sorgfältig planen 
und testen, um sicherzustellen, dass sie korrekt funktionieren und das Benutzererlebnis verbessern. 
Es ist auch wichtig, die Einschränkungen und Best Practices für die automatische Wiedergabe von 
Inhalten zu berücksichtigen, um ein positives Benutzererlebnis zu gewährleisten. 


Unterstützung für unterschiedliche Medienformate 

Die Unterstützung für unterschiedliche Medienformate variiert je nach Browser und Plattform. Einige 
Formate werden von allen modernen Browsern unterstützt, während andere nur von bestimmten 
Browsern unterstützt werden. Um die Kompatibilität sicherzustellen, empfiehlt es sich, mehrere 
Formate bereitzustellen und das <source>-Tag innerhalb des <audio> oder <video>-Tags zu 
verwenden, um die unterschiedlichen Formate anzugeben. 


Audioformate: Die am häufigsten unterstützten Audioformate sind MP3, WAV und OGG. MP3 und 
WAV sind am weitesten verbreitet, während OGG von einigen Browsern wie Firefox und Chrome 
unterstützt wird. 


Videoformate: Die am häufigsten unterstützten Videoformate sind MP4, WebM und OGG. MPA ist 
am weitesten verbreitet und wird von den meisten Browsern unterstützt, während WebM und OGG 
von einigen Browsern wie Firefox und Chrome unterstützt werden. 


Es gibt auch alternative Methoden, um Audio- und Videoinhalte bereitzustellen, wie z.B. das 
verwenden von externen Diensten wie YouTube oder Vimeo, die die Inhalte in einem einzigen 
Format hosten und über iFrame oder Embed-Tags eingebunden werden können. Dies kann die 
Kompatibilitätsprobleme umgehen, aber es kann auch Abhängigkeiten von diesen Diensten und 
mögliche Einschränkungen für die Verwendung der Inhalte erzeugen. 


Es ist wichtig zu beachten, dass die Unterstützung für bestimmte Medienformate sich im Laufe der 
Zeit ändern kann und es empfehlenswert ist, die Kompatibilität regelmäßig zu überprüfen. Es ist auch 
wichtig, alternative Formate bereitzustellen, um sicherzustellen, dass die Inhalte auf möglichst vielen 
Geräten und Browsern abgespielt werden können. 


5.HTML5-Canvas 


Zeichnen und Malen mit Canvas 

HTMLS bietet die Möglichkeit, zeichnen und malen mit dem <canvas>-Tag. Der <canvas>-Tag erstellt 
ein transparentes rechteckiges Element, auf dem Entwickler mithilfe von JavaScript Zeichnungen und 
Grafiken erstellen können. 


Zeichnen auf dem Canvas: Mit JavaScript können Entwickler auf dem Canvas zeichnen, indem sie auf 
das <canvas>-Element zugreifen und Methoden wie "getContext" verwenden, um auf das 
Zeichenflächenkontext-Objekt zuzugreifen. Dann können sie Methoden wie "fillRect" oder 
"strokeRect" verwenden, um Rechtecke auf dem Canvas zu zeichnen. Es gibt auch Methoden wie 
"moveTo" und "lineTo" die verwendet werden können um Linien zu zeichnen, und Methoden wie 
"arc" oder "ellipse" um Kreise und Ellipsen zu zeichnen. 


Farben und Linienstile: Mit JavaScript können Entwickler die Farbe und Linienstil für die Zeichnungen 
auf dem Canvas festlegen. Sie können Methoden wie "fillStyle" oder "strokeStyle" verwenden, um 
die Farbe festzulegen, und Methoden wie "lineWidth" verwenden, um die Dicke der Linien zu 
ändern. 


Bilder und andere Canvas zeichnen: Entwickler können auch Bilder und andere Canvas-Elemente auf 
ein Canvas zeichnen, indem sie die "drawimage" Methode verwenden. Sie können auch Canvas als 
Bild speichern, indem sie die "toDataURL" Methode verwenden. 


Es gibt auch zahlreiche Bibliotheken und Frameworks, die die Verwendung von Canvas erleichtern 
und zusätzliche Funktionen wie Animationen, Transformationen und Ereignisbehandlung 
bereitstellen. Es ist wichtig, sicherzustellen, dass die Zeichnungen und Grafiken auf dem Canvas 
sorgfältig geplant und getestet werden, um ein positives Benutzererlebnis zu gewährleisten. 


Animationen und Interaktionen 
HTMLS bietet die Möglichkeit, Animationen und Interaktionen mithilfe von JavaScript und CSS zu 
erstellen. 


CSS-Animationen: Mit CSS können Entwickler Animationen erstellen, indem sie die Eigenschaft 
"transition" oder "animation" verwenden. Sie können auch Keyframe-Animationen erstellen, indem 
sie @keyframes-Regeln definieren und diese auf ein Element anwenden. Diese Art der Animationen 
sind einfach zu implementieren, jedoch sind sie begrenzt in Bezug auf die Anzahl der animierbaren 
Eigenschaften und die Möglichkeiten der Steuerung. 


JavaScript-Animationen: Mit JavaScript können Entwickler Animationen erstellen, indem sie auf 
Elemente zugreifen und deren Eigenschaften über die Zeit verändern. Eine Möglichkeit ist die 
Verwendung von Timing-Funktionen wie setInterval oder requestAnimationFrame, um die 
Animationen zu aktualisieren. JavaScript-Animationen bieten mehr Kontrolle und Flexibilität als CSS- 
Animationen, sind jedoch aufwendiger zu implementieren. 


Interaktionen: Mit JavaScript können Entwickler Interaktionen erstellen, indem sie Ereignis listener 
auf Elemente anwenden und auf bestimmte Ereignisse reagieren. Beispiele für solche Ereignisse sind 
Mausklicks, Berührungen auf mobilen Geräten und Tastatureingaben. Mit diesen Ereignissen können 
Entwickler die Animationen steuern, Elemente hinzufügen oder entfernen, Daten speichern und 
vieles mehr. 


Es gibt auch zahlreiche Bibliotheken und Frameworks, die die Erstellung von Animationen und 
Interaktionen erleichtern, wie z.B. jQuery, GreenSock und Anime.js. Es ist wichtig, sicherzustellen, 
dass die Animationen und Interaktionen sorgfältig geplant und getestet werden, um ein positives 
Benutzererlebnis zu gewährleisten und die Leistung nicht zu beeinträchtigen. 


Canvas-Performance optimieren 

Die Leistung von Canvas-Animationen und -Interaktionen kann beeinträchtigt werden, wenn das 
Zeichnen und Aktualisieren des Canvas zu häufig oder zu aufwendig ist. Es gibt einige Techniken, die 
Entwickler verwenden können, um die Leistung von Canvas-Anwendungen zu optimieren: 


Verwenden von requestAnimationFrame anstelle von setInterval oder setTimeout: 
requestAnimationFrame synchronisiert die Aktualisierung des Canvas mit dem 
Bildschirmaktualisierungsraten, was zu einer glatteren Animation führt und die Leistung verbessert. 


Verwenden von gecachten Variablen und Objekten: Vermeiden Sie unnötige Erstellung von Variablen 
und Objekten, die in jedem Frame neu erstellt werden müssen. Caching diese Variablen und Objekte 
kann die Leistung verbessern. 


Verwenden von Transparenz: Transparente Bereiche des Canvas müssen nicht gezeichnet werden, 
was die Leistung verbessert. 


Verwenden von Compositing: Verwenden Sie die Compositing-Methoden des Canvas, um mehrere 
Elemente in einem einzigen Schritt zu zeichnen, anstatt jedes Element einzeln zu zeichnen. 


Vermeiden Sie unnötige Aktualisierungen: Vermeiden Sie unnötige Aktualisierungen des Canvas 
durch Verwendung von gecachten Werten und prüfen Sie, ob eine Aktualisierung wirklich 
erforderlich ist. 


Vermeiden Sie unnötige Berechnungen: Vermeiden Sie unnötige Berechnungen in jedem Frame, 
indem Sie gecachte Werte verwenden und Berechnungen vorab durchführen. 


Es ist wichtig, die Leistung von Canvas-Anwendungen regelmäßig zu überwachen und zu optimieren, 
um sicherzustellen, dass sie auf allen Geräten und Browsern reibungslos funktionieren. Es empfiehlt 
sich auch, die Entwicklungs-Tools des Browsers zu verwenden, um die Leistung zu überwachen und 
zu optimieren. 


6.HTML5-Geolocation 


Standortbestimmung mit HTML5 

HTMLS5 ermöglicht es Entwicklern, den Standort des Benutzers zu bestimmen, indem sie die 
Geolocation API verwenden. Diese API ermöglicht es einer Web-Anwendung, Zugriff auf die GPS- 
Daten des Benutzers zu erhalten und so die aktuelle Position des Benutzers zu bestimmen. 


Die Geolocation API verfügt über ein einfaches JavaScript-Interface, das es Entwicklern ermöglicht, 
die aktuelle Position des Benutzers abzufragen. Dazu gehören die Methoden "getCurrentPosition" 
und "watchPosition", die die aktuelle Position des Benutzers abfragen und überwachen können. 
Beide Methoden akzeptieren einen Callback, der aufgerufen wird, wenn die Position des Benutzers 
erfolgreich abgefragt wurde. 


Es ist wichtig zu beachten, dass die Abfrage des Standorts des Benutzers die Privatsphäre des 
Benutzers beeinträchtigen kann und es empfiehlt sich, die Benutzer um Erlaubnis zur 
Standortbestimmung zu bitten, bevor die Position abgefragt wird. 


Es gibt auch alternative Methoden, um die Standortbestimmung zu ermöglichen, wie z.B. die 
Verwendung von IP-Adresse oder WLAN-Netzwerken. Diese Methoden sind jedoch in der Regel nicht 
so genau wie GPS und können nicht immer verlässlich sein. 


Anzeige von Karten und Ortsmarken 

HTMLS5 ermöglicht es Entwicklern, Karten und Ortsmarken in Web-Anwendungen anzuzeigen, indem 
sie externe Karten-APls wie Google Maps oder OpenStreetMap verwenden. Diese APIs bieten 
JavaScript-Bibliotheken, die es Entwicklern ermöglichen, eine Karte in eine Webseite einzubetten und 
Ortsmarken hinzuzufügen. 


Die Implementierung einer Karte in eine Web-Anwendung besteht in der Regel aus folgenden 
Schritten: 


Erhalten eines API-Schlüssels von der gewählten Karten-API 

Einbinden der JavaScript-Bibliothek der API in die Webseite 

Erstellen eines <div>-Elements, in dem die Karte angezeigt werden soll 

Initialisieren der Karte mithilfe der JavaScript-Bibliothek und des API-Schlüssels 
Hinzufügen von Ortsmarken zur Karte mithilfe von Methoden der JavaScript-Bibliothek 


Bei der Verwendung von Ortsmarken können Entwickler verschiedene Informationen hinzufügen, 
wie z.B. den Namen, die Adresse, ein Bild oder eine Beschreibung der Ortsmarke. Es gibt auch 
Möglichkeiten, Interaktionen mit Ortsmarken wie das Anzeigen von Pop-up-Fenstern oder Links zu 
weiteren Informationen bereitzustellen. 


Es gibt auch alternative Methoden, um Karten und Ortsmarken anzuzeigen, wie z.B. die Verwendung 
von WebGL-basierten Bibliotheken wie Mapbox GL JS oder Deck.gl. Diese Bibliotheken ermöglichen 
es, interaktive und performante Karten in eine Web-Anwendung zu integrieren, und bieten 
erweiterte Funktionen wie 3D-Darstellungen und die Möglichkeit, große Datenmengen darzustellen. 


Es ist wichtig zu beachten, dass die Verwendung von Karten-APlIs in der Regel mit Kosten oder 
Nutzungsbeschränkungen verbunden ist und es empfiehlt sich, die Nutzungsbedingungen sorgfältig 
zu lesen und zu verstehen. Es ist auch wichtig, die Privatsphäre des Benutzers zu berücksichtigen und 
sicherzustellen, dass die Datenschutzrichtlinien eingehalten werden. 


Sicherheit und Datenschutz 

Die Sicherheit und der Datenschutz sind wichtige Aspekte bei der Entwicklung von Web- 
Anwendungen, insbesondere wenn sie sensible Daten wie persönliche Informationen oder 
Zahlungsdetails verarbeiten. 


Ein wichtiger Aspekt der Sicherheit ist die Übertragung von Daten zwischen dem Benutzer und der 
Anwendung. Dies sollte immer über eine sichere Verbindung erfolgen, die als "HTTPS" bezeichnet 
wird. Diese Verbindung nutzt ein SSL- oder TLS-Zertifikat, um sicherzustellen, dass die Daten 
verschlüsselt übertragen werden und nicht von Dritten abgefangen werden können. 


Ein weiterer wichtiger Aspekt ist die Validierung von Eingabedaten. Dies sollte immer auf Server-Seite 
durchgeführt werden, um sicherzustellen, dass nur gültige Daten verarbeitet werden. Es ist auch 
wichtig, dass die Anwendung gegen Angriffe wie SQL-Injection oder Cross-Site Scripting (XSS) 
geschützt ist. 


In Bezug auf den Datenschutz ist es wichtig, dass die Anwendung die Datenschutzrichtlinien einhält 
und dass der Benutzer über die Verwendung seiner Daten informiert wird. Dies sollte in einer 
Datenschutzerklärung dargelegt werden, die leicht zugänglich sein sollte. Es sollte auch sichergestellt 
werden, dass die Anwendung nur die erforderlichen Daten sammelt und diese nicht länger als 
erforderlich aufbewahrt werden. 


Es ist wichtig, dass Entwickler regelmäßig Sicherheitsupdates und Patches für die verwendeten 
Technologien und Bibliotheken installieren, um ihre Anwendungen gegen bekannte Schwachstellen 
zu schützen. Es ist auch empfehlenswert, regelmäßige Sicherheitstests durchzuführen, um 
potenzielle Schwachstellen zu identifizieren und zu beheben. 


7.HTMLS5-Speicher 


Lokaler Speicher 

HTMLS5 ermöglicht es Entwicklern, Daten lokal im Browser des Benutzers zu speichern, ohne dass 
eine Verbindung zum Server erforderlich ist. Dies wird durch die Verwendung der Web Storage API 
ermöglicht, die zwei Arten von lokalem Speicher bereitstellt: "IocalStorage" und "sessionStorage". 


Der localStorage dient zum Speichern von Daten, die über mehrere Sitzungen hinweg erhalten 
bleiben sollen. Das bedeutet, dass die gespeicherten Daten auch dann erhalten bleiben, wenn der 
Benutzer die Anwendung schließt oder den Browser neu startet. 


Der sessionStorage dient dazu, Daten nur für eine einzelne Sitzung zu speichern. Das bedeutet, dass 
die gespeicherten Daten gelöscht werden, sobald der Benutzer die Anwendung schließt oder den 
Browser neu startet. 


Beide Arten von Speicher sind key-value-basiert und Entwickler können Daten mit Methoden wie 
setltem() und getltem() speichern und abrufen. Es gibt auch Methoden zum Entfernen von Daten aus 
dem Speicher und zum Überprüfen der verfügbaren Speicherkapazität. 


Es ist wichtig zu beachten, dass die Größe des lokalen Speichers begrenzt ist und dass ältere Browser 
möglicherweise nicht vollständig mit der Web Storage API kompatibel sind. Entwickler sollten daher 


sicherstellen, dass die Anwendung auch in älteren Browsern funktioniert und dass sie die Daten 
sicher und geschützt speichern. 


Session Storage 

Der Session Storage ist ein Teil der Web Storage API von HTMLS5, die es Entwicklern ermöglicht, 
Daten im Browser des Benutzers zu speichern. Im Gegensatz zum Local Storage, der Daten dauerhaft 
speichert, ist der Session Storage dafür gedacht, Daten nur für die Dauer einer einzelnen Sitzung zu 
speichern. Eine Sitzung beginnt, wenn der Benutzer die Anwendung aufruft und endet, wenn der 
Benutzer die Anwendung schließt oder den Browser neu startet. 


Der Session Storage verwendet ein key-value-basiertes Speichermodell, bei dem Entwickler Daten 
mit Methoden wie setltem() und getltem() speichern und abrufen können. Es gibt auch Methoden 
zum Entfernen von Daten aus dem Speicher und zum Überprüfen der verfügbaren Speicherkapazität. 


Ein Anwendungsfall für den Session Storage kann sein, dass eine Web-Anwendung den Zustand des 
Benutzers während einer Sitzung speichern möchte, ohne dass dieser Zustand dauerhaft gespeichert 
werden muss. Beispielsweise könnte ein E-Commerce-Anwendung den Warenkorb des Benutzers im 
Session Storage speichern, damit dieser seine Auswahl nach dem Schließen oder Neustart des 
Browsers nicht verliert. 


Es ist wichtig zu beachten, dass der Session Storage begrenzt ist und dass ältere Browser 
möglicherweise nicht vollständig mit der Web Storage API kompatibel sind. Entwickler sollten daher 
sicherstellen, dass die Anwendung auch in älteren Browsern funktioniert und dass sie die Daten 
sicher und geschützt speichern. 


Cookies 

Cookies sind kleine Textdateien, die von einer Webseite auf dem Computer des Benutzers 
gespeichert werden, wenn der Benutzer die Seite besucht. Sie dienen dazu, Informationen über den 
Benutzer und seine Interaktionen mit der Webseite zu speichern, um die Nutzererfahrung zu 
verbessern und die Funktionalität der Webseite zu erhöhen. 


Cookies werden von einem Web-Server an den Browser des Benutzers gesendet und von diesem 
gespeichert. Beim nächsten Besuch der Webseite kann der Server die gespeicherten Cookies 
zurückfordern und dadurch erkennen, wer der Benutzer ist und welche Aktionen er zuvor auf der 
Webseite ausgeführt hat. 


Cookies können verschiedene Arten von Informationen speichern, wie z.B. den Benutzernamen und 
das Passwort des Benutzers, um automatisch einzuloggen, den Inhalt des Warenkorbs in einem E- 
Commerce-Shop oder die Präferenzen des Benutzers, wie die Spracheinstellungen. 


Cookies können auf unterschiedliche Weise verwendet werden und es gibt verschiedene Arten von 
Cookies, wie zum Beispiel: 


Session-Cookies, die nur für die Dauer einer Sitzung gespeichert werden und beim Schließen des 
Browsers automatisch gelöscht werden 


Persistente Cookies, die für einen bestimmten Zeitraum oder unbegrenzt gespeichert werden und 
erst nach Abllauf dieser Zeit oder manuell gelöscht werden 


First-Party-Cookies, die von der Webseite gesetzt werden, die der Benutzer besucht hat 


Third-Party-Cookies, die von einer anderen Domain als der besuchten Webseite gesetzt werden, 
beispielsweise von Werbepartnern oder Analyse-Tools. 


Es gibt auch spezielle Arten von Cookies wie Secure Cookies und HttpOnly Cookies, die bestimmte 
Einschränkungen bezüglich des Zugriffs auf die Cookies haben, um die Sicherheit zu erhöhen. 


Es ist wichtig zu beachten, dass Cookies möglicherweise Datenschutzprobleme aufwerfen, da sie es 
ermöglichen, Benutzeraktivitäten zu verfolgen und persönliche Informationen zu sammeln. Deshalb 
gibt es in vielen Ländern gesetzliche Vorschriften, die die Verwendung von Cookies regulieren und 
die Einwilligung des Benutzers erfordern. Es ist daher wichtig, dass Entwickler die 
Datenschutzrichtlinien einhalten und den Benutzern die Möglichkeit geben, die Verwendung von 
Cookies zu akzeptieren oder abzulehnen. 


8.HTML5-APIs 


WebSockets 

WebsSockets sind ein Protokoll, das es ermöglicht, bidirektionale, persistente Verbindungen zwischen 
einem Web-Client und einem Server aufzubauen. Im Gegensatz zu traditionellen HTTP- 
Verbindungen, bei denen jede Anforderung von einem Client an einen Server eine separate 
Verbindung erfordert, ermöglicht es eine WebSocket-Verbindung, dass sowohl der Client als auch der 
Server Daten jederzeit senden und empfangen können. 


WebsSockets werden über einen Upgrade-Request von HTTP auf das WebSocket-Protokoll aufgebaut. 
Sobald die Verbindung hergestellt ist, können sowohl der Client als auch der Server Nachrichten über 
die Verbindung senden und empfangen, ohne dass eine neue Verbindung aufgebaut werden muss. 


Dieses Protokoll ermöglicht es Entwicklern, Anwendungen zu erstellen, die in Echtzeit auf 
Änderungen reagieren können, wie z.B. Online-Spiele, Chat-Anwendungen, Finanzüberwachungen 
und vieles mehr. Es ermöglicht auch die Erstellung von Anwendungen mit reduziertem 
Netzwerkverkehr und Latenzen, da die Verbindungen offen bleiben und keine neuen Verbindungen 
aufgebaut werden müssen. 


Es ist wichtig zu beachten, dass nicht alle Browser und Server WebSockets unterstützen und es 
möglicherweise Einschränkungen bei der Verwendung von Firewalls oder anderen 
Netzwerkeinschränkungen geben kann. Entwickler sollten daher sicherstellen, dass ihre 
Anwendungen mit älteren Browsern und in begrenzten Netzwerkumgebungen funktionieren und 
dass sie die Sicherheit der WebSocket-Verbindungen sicherstellen, indem sie z.B. Authentifizierung 
und Verschlüsselung implementieren. 


WebsSockets erfordert eine Unterstützung von WebSocket-Protokoll sowohl auf Seite des Clients als 
auch auf Seite des Servers. Es gibt verschiedene Bibliotheken und Frameworks die es ermöglichen 
WebsSockets zu verwenden, sowohl auf client- als auch auf serverseitig. 


Es gibt auch eine Möglichkeit WebSockets über einen Proxyserver oder einen Load-Balancer zu 
nutzen, das ermöglicht es die Verbindungen auf mehrere Server aufzuteilen und so die Last auf 
mehrere Server zu verteilen. 


Insgesamt ermöglicht WebSockets eine neue Art von Interaktion zwischen Client und Server und 
ermöglicht es Entwicklern, Anwendungen zu erstellen, die in Echtzeit auf Änderungen reagieren und 
eine höhere Benutzerinteraktivität bieten können. 


Webworkers 

Web Workers sind ein Feature von HTMLS5, das es ermöglicht, JavaScript-Code im Hintergrund 
auszuführen, ohne dass dies die Benutzeroberfläche beeinträchtigt. Sie ermöglichen es, lange 
laufende Prozesse, wie z.B. Berechnungen oder Datenabfragen, in einem eigenen Thread 
auszuführen, wodurch die Leistung und Reaktionsfähigkeit der Anwendung erhöht werden kann. 


Ein Web Worker wird durch Erstellen einer neuen Worker-Instanz mithilfe des Konstruktors 
"Worker()" gestartet und kann dann durch den Aufruf von Methoden wie "postMessage()" und 
"terminate()" gesteuert werden. Der Web Worker hat seinen eigenen globalen Kontext und kann 
daher nicht direkt auf die DOM-Elemente oder Variablen des Hauptthreads zugreifen. Stattdessen 
müssen Daten über die "postMessage()" Methode zwischen dem Hauptthread und dem Web Worker 
ausgetauscht werden. 


Web Workers können mehrere auf einmal ausgeführt werden und ermöglichen es Entwicklern, 
Aufgaben wie z.B. Datenverarbeitung, zu parallelisieren und damit die Leistung der Anwendung zu 
verbessern. Es ist wichtig zu beachten, dass nicht alle Browser Web Workers unterstützen und es 
möglicherweise Einschränkungen bei der Verwendung von bestimmten Funktionen oder APIs geben 
kann. Entwickler sollten daher sicherstellen, dass ihre Anwendungen mit älteren Browsern 
kompatibel sind und dass sie die Unterstützung von Web Workers überprüfen, bevor sie diese 
Funktionalität in ihrer Anwendung verwenden. 


Es ist wichtig zu beachten, dass Web Workers keinen Zugriff auf bestimmte APIs haben, wie z.B. auf 
das DOM oder auf die meisten JavaScript-APls. Web workers können auch keine GUI-Aktionen 
ausführen, sie können nur Daten berechnen und die Ergebnisse an den Hauptthread zurücksenden. 


Web Workers sind nützlich für Aufgaben, die lange dauern und die nicht unbedingt die 
Benutzerinteraktion beeinflussen müssen. Sie sind besonders nützlich für Aufgaben wie z.B. 
Datenverarbeitung, Bild- oder Audioprozessierung und andere Aufgaben die viel Rechenleistung 
erfordern. 


Insgesamt ermöglicht die Verwendung von Web Workers die Verbesserung der Leistung und 
Reaktionsfähigkeit von Anwendungen, indem es ermöglicht, lange laufende Prozesse im Hintergrund 
auszuführen. Entwickler sollten jedoch sicherstellen, dass ihre Anwendungen mit älteren Browsern 
kompatibel sind und dass sie die Sicherheit und den Datenschutz berücksichtigen, wenn sie Web 
Workers in ihrer Anwendung verwenden. 


WebRTC 

WebRTC (Real-Time Communication) ist eine Technologie, die es ermöglicht, Audio- und Video- 
Kommunikation in Echtzeit direkt im Browser durchzuführen, ohne dass zusätzliche Plug-ins oder 
Software erforderlich sind. Es ist ein offener Standard und wird von vielen modernen Browsern 
unterstützt, einschließlich Chrome, Firefox, Safari und Edge. 


WebRTC ermöglicht es Entwicklern, Anwendungen zu erstellen, die Audio- und Video-Chat, Peer-to- 
Peer-Dateiübertragungen und sogar virtuelle und erweiterte Realität ermöglichen. Es nutzt dafür die 
unterschiedlichen Technologien wie z.B. RTP(Real-time Transport Protocol), STUN(Session Traversal 

Utilities for NAT) oder TURN(Traversal Using Relays around NAT) 


WebRTC bietet auch erweiterte Funktionen wie Unterstützung für mehrere Audio- und Video- 
Streams, die Möglichkeit, die Größe und Position von Video-Feeds anzupassen und die Möglichkeit, 
Audio- und Video-Einstellungen zu steuern. Es ermöglicht auch die Verwendung von Datenkanälen, 
die es ermöglichen, Daten in Echtzeit zwischen den Teilnehmern auszutauschen. 


Es ist wichtig zu beachten, dass nicht alle Browser WebRTC unterstützen und es möglicherweise 
Einschränkungen bei der Verwendung von bestimmten Funktionen oder APIs geben kann. Entwickler 
sollten daher sicherstellen, dass ihre Anwendungen mit älteren Browsern kompatibel sind und dass 
sie die Unterstützung von WebRTC überprüfen, bevor sie diese Funktionalität in ihre Anwendungen 
implementieren. Auch die Datenschutz- und Sicherheitsaspekte sollten bei der Verwendung von 
WebRTC berücksichtigt werden, da es möglicherweise Datenlecks oder unbefugten Zugriff auf die 
übertragenen Daten geben kann. 


Ein weiteres wichtiges Anwendungsgebiet von WebRTC ist die Anbindung von externen Geräten wie 
z.B. Webcams oder Mikrofonen an eine Web-Anwendung, was eine einfache und 
plattformübergreifende Möglichkeit für die Verwendung dieser Geräte darstellt. Auch die 
Möglichkeit der Verwendung von WebRTC in mobilen Anwendungen, wie z.B. in hybriden Apps oder 
Progressive Web Apps, erweitert die Einsatzmöglichkeiten von WebRTC nochmals. 


In unserem Buch werden wir detailliert auf die verschiedenen Aspekte von WebRTC eingehen und 
zeigen, wie man es am besten in eigene Anwendungen einbinden kann. Wir werden auch Beispiele 
für typische Anwendungen und Anwendungsfälle von WebRTC vorstellen und auf die wichtigsten 
Best Practices für die Entwicklung von Anwendungen mit WebRTC eingehen. 


WebGL 

WebGL (Web Graphics Library) ist eine Erweiterung von HTMLS5, die es ermöglicht, 3D-Grafiken und 
Animationen direkt im Browser darzustellen. Es basiert auf der OpenGL-API (Application 
Programming Interface), die ursprünglich für die Entwicklung von Anwendungen auf Desktop- 
Systemen verwendet wurde. Durch die Verwendung von WebGL können Entwickler interaktive 3D- 
Inhalte direkt in einer Webseite oder einer Web-Anwendung bereitstellen, ohne dass zusätzliche 
Plug-ins oder Software erforderlich sind. 


WebGL ermöglicht es, 3D-Modelle, Texturen, Beleuchtung und Schatten in einer Webseite 
darzustellen. Es unterstützt auch die Verwendung von Shader-Programmen, die es ermöglichen, die 
Darstellung von 3D-Inhalten anzupassen und zu optimieren. Durch die Verwendung von WebGL 
können Entwickler interaktive 3D-Anwendungen erstellen, wie z.B. Spiele, Simulationen, 
medizinische Visualisierungen, architektonische Visualisierungen und vieles mehr. 


Ein weiteres wichtiges Anwendungsgebiet von WebGl ist die Verwendung in virtuellen und 
erweiterten Realität. Durch die Möglichkeit, 3D-Inhalte direkt im Browser darzustellen, können VR- 
und AR-Anwendungen ohne die Notwendigkeit von zusätzlichen Software oder Hardware entwickelt 
werden. 


Es ist wichtig zu beachten, dass nicht alle Browser WebGL unterstützen und es möglicherweise 
Einschränkungen bei der Verwendung von bestimmten Funktionen oder APIs geben kann. Entwickler 
sollten daher sicherstellen, dass ihre Anwendungen mit älteren Browsern kompatibel sind und dass 


sie die Unterstützung von WebGL überprüfen, bevor sie diese Funktionalität in ihre Anwendungen 
implementieren. Auch die Performance von WebGL-Anwendungen kann je nach Hardware- 
Ausstattung des Benutzers variieren und sollte bei der Entwicklung berücksichtigt werden. 


In unserem Buch werden wir detailliert auf die verschiedenen Aspekte von WebGlL eingehen und 
zeigen, wie man es am besten in eigene Anwendungen einbinden kann. Wir werden auch Beispiele 
für typische Anwendungen und Anwendungsfälle von WebGl vorstellen und auf die wichtigsten Best 
Practices für die Entwicklung von Anwendungen mit WebGlL eingehen. Dazu gehört auch, wie man 
die Performance optimiert, um eine flüssige Darstellung der 3D-Inhalte zu gewährleisten. Wir werden 
auch auf die verschiedenen Möglichkeiten eingehen, wie man 3D-Modelle und Texturen in eine 
WebGL-Anwendung einbinden kann, sowie auf die verschiedenen Shader-Programme, die verfügbar 
sind, um die Darstellung anzupassen und zu optimieren. 


Ein weiteres wichtiges Thema, das wir in unserem Buch behandeln werden, ist die Verwendung von 
Web6Gl in der virtuellen und erweiterten Realität. Wir werden auf die technischen 
Herausforderungen eingehen, die mit der Entwicklung von VR- und AR-Anwendungen verbunden 
sind, sowie auf die verschiedenen Möglichkeiten, wie man die Interaktion mit 3D-Inhalten in einer 
VR- oder AR-Umgebung gestaltet. 


Insgesamt bietet WebGl eine leistungsstarke Möglichkeit, interaktive 3D-Inhalte direkt im Browser 
darzustellen und ermöglicht Entwicklern, eine Vielzahl von Anwendungen und Anwendungsfällen zu 
entwickeln. In unserem Buch werden wir auf alle Aspekte von WebGl eingehen und zeigen, wie man 
es am besten in eigene Anwendungen einbinden kann. 


9.HTML5-Mobile Entwicklung 


Responsive Design 

Responsive Design ist ein Konzept in der Webentwicklung, das darauf abzielt, eine optimale 
Darstellung von Webseiten und Anwendungen auf unterschiedlichen Geräten und Bildschirmgrößen 
sicherzustellen. Es ermöglicht es, dass die Inhalte und Layouts einer Webseite automatisch an die 
jeweilige Bildschirmgröße angepasst werden, ohne dass der Benutzer manuell zwischen 
verschiedenen Versionen der Webseite wechseln muss. 


Das Responsive Design basiert auf dem Einsatz von flexiblen Layouts und Grids, die es ermöglichen, 
dass die Elemente einer Webseite automatisch an die jeweilige Bildschirmgröße angepasst werden. 
Dazu werden in der Regel Prozentangaben für die Breite und Höhe der Elemente verwendet, anstatt 
feste Pixelangaben. Auch die Verwendung von flexiblen Bildern und Schriften ermöglicht es, dass die 
Inhalte der Webseite auf unterschiedlichen Geräten optimal dargestellt werden. 


Ein wichtiger Bestandteil des Responsive Designs ist auch die Verwendung von Media Queries. Media 
Queries ermöglichen es, bestimmte CSS-Regeln nur dann anzuwenden, wenn bestimmte 
Bedingungen erfüllt sind, wie z.B. die Bildschirmgröße. So kann man z.B. bestimmte Layout-Regeln 
nur dann anwenden, wenn die Bildschirmgröße kleiner als ein bestimmter Wert ist. 


Responsive Design hat in den letzten Jahren an Bedeutung gewonnen, da immer mehr Benutzer mit 
unterschiedlichen Geräten und Bildschirmgrößen auf Webseiten und Anwendungen zugreifen. Es 
ermöglicht eine bessere Benutzerfreundlichkeit und erhöht die Zufriedenheit der Benutzer, da die 
Inhalte immer optimal dargestellt werden. Auch für die Suchmaschinenoptimierung ist Responsive 
Design von großer Bedeutung, da es dazu beiträgt, dass die Inhalte einer Webseite auf 
unterschiedlichen Geräten gut erreichbar und lesbar sind. 


In unserem Buch werden wir detailliert auf die verschiedenen Aspekte des Responsive Designs 
eingehen und zeigen, wie man es am besten in eigene Webseiten und Anwendungen einbinden kann. 
Wir werden auf die verschiedenen Techniken eingehen, die zur Umsetzung von Responsive Design 
verwendet werden können, wie z.B. flexibles Grid-System , flexibles Layout, Media Queries und die 
Verwendung von flexiblen Bildern und Schriften. Wir werden auch Beispiele für typische 
Anwendungen und Anwendungsfälle von Responsive Design vorstellen und auf die wichtigsten Best 
Practices für die Entwicklung von responsiven Webseiten eingehen. 


Wir werden auch auf die Herausforderungen eingehen, die bei der Umsetzung von Responsive 
Design auftreten können, wie z.B. die Anpassung von Inhalten und Layouts auf unterschiedlichen 
Geräten und Bildschirmgrößen, die Optimierung der Performance und die Vermeidung von 
Problemen mit der Navigation oder dem Zugriff auf bestimmte Funktionen. 


Ein wichtiger Aspekt des Responsive Design ist die Testbarkeit auf verschiedenen Geräten und 
Bildschirmgrößen. Wir werden auf die verschiedenen Tools und Methoden eingehen, die Entwickler 
verwenden können, um ihre Webseiten und Anwendungen auf unterschiedlichen Geräten zu testen 
und Probleme zu identifizieren. 


Insgesamt bietet Responsive Design eine leistungsstarke Möglichkeit, die Darstellung von Webseiten 
und Anwendungen auf unterschiedlichen Geräten und Bildschirmgrößen sicherzustellen. In unserem 
Buch werden wir auf alle Aspekte von Responsive Design eingehen und zeigen, wie man es am 
besten in eigene Webseiten und Anwendungen einbinden kann. 


Touch-Events 

Touch-Events sind Ereignisse, die in der Webentwicklung verwendet werden, um die Interaktion von 
Benutzern mit Touchscreens zu erfassen und zu verarbeiten. Sie ermöglichen es, dass Benutzer 
Interaktionen wie Tippen, Wischen, Zoomen und andere Aktionen auf einem Touchscreen ausführen 
können. 


Die wichtigsten Touch-Events sind touchstart, touchmove, touchend und touchcancel. 


touchstart wird ausgelöst, wenn der Benutzer den Touchscreen berührt. 
touchmove wird ausgelöst, wenn der Benutzer den Finger auf dem Touchscreen bewegt. 
touchend wird ausgelöst, wenn der Benutzer den Finger vom Touchscreen nimmt. 


touchcancel wird ausgelöst, wenn ein Touch-Event unerwartet abgebrochen wird, z.B. durch einen 
Anruf oder eine Benachrichtigung. 


Jedes Touch-Event gibt auch Informationen über die genaue Position des Berührungspunkts auf dem 
Touchscreen zurück. Diese Informationen können verwendet werden, um die Interaktion mit 
bestimmten Elementen auf einer Webseite oder einer Web-Anwendung zu steuern. 


Es gibt auch erweiterte Touch-Events wie touchforcechange und touchleave, die es ermöglichen, die 
Kraft und die Dauer einer Berührung zu erfassen und zu verarbeiten. 


Es gibt auch gesture-Events wie pinch und rotate, die es ermöglichen, die Interaktionen wie zoomen 
und drehen zu erfassen und zu verarbeiten. 


Es ist wichtig zu beachten, dass nicht alle Browser Touch-Events unterstützen und es möglicherweise 
Einschränkungen bei der Verwendung von bestimmten Funktionen oder APIs geben kann. Entwickler 
sollten daher sicherstellen, dass ihre Anwendungen mit älteren Browsern kompatibel sind und dass 
sie die Unterstützung von Touch-Events überprüfen, bevor sie diese Funktionalität in ihre 
Anwendungen implementieren. Einige Browser erfordern auch bestimmte Polyfills oder Libraries, um 
die Unterstützung von Touch-Events sicherzustellen. 


iOS und Android Unterstützung 


iOS und Android sind die beiden wichtigsten Betriebssysteme für mobile Geräte und bieten 
unterschiedliche Möglichkeiten für die Entwicklung von Anwendungen. 


iOS ist das Betriebssystem von Apple und wird auf iPhones, iPads und iPods verwendet. Die 
Entwicklung von Anwendungen für iOS erfolgt in der Regel mit der Programmiersprache Swift oder 
Objective-C und dem Xcode-Entwicklungsumfeld. iOS bietet eine umfangreiche Bibliothek an APIs 
und Frameworks für die Entwicklung von Anwendungen, die auf den verschiedenen Apple-Geräten 
laufen. Es gibt auch viele Tools und Ressourcen für die Entwicklung von iOS-Anwendungen, 
einschließlich Design-Guidelines und Best Practices von Apple. 


Android ist ein Betriebssystem, das von Google entwickelt wird und auf einer Vielzahl von Geräten 
von verschiedenen Herstellern verfügbar ist. Die Entwicklung von Anwendungen für Android erfolgt 
in der Regel mit der Programmiersprache Java oder Kotlin und dem Android Studio- 
Entwicklungsumfeld. Android bietet auch eine umfangreiche Bibliothek an APIs und Frameworks für 
die Entwicklung von Anwendungen, die auf den verschiedenen Android-Geräten laufen. Es gibt auch 
viele Tools und Ressourcen für die Entwicklung von Android-Anwendungen, einschließlich Design- 
Guidelines und Best Practices von Google. 


Es ist wichtig zu beachten, dass die Unterstützung von iOS und Android unterschiedlich sein kann und 
es möglicherweise Einschränkungen bei der Verwendung von bestimmten Funktionen oder APIs 
geben kann. Entwickler sollten daher sicherstellen, dass ihre Anwendungen mit den neuesten 
Versionen von iOS und Android kompatibel sind und dass sie die Unterstützung von iOS und Android 
überprüfen, bevor sie diese Funktionalität in ihre Anwendungen implementieren. 
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